<template>
  <div>
    <div class="chart-title">{{ chartTitle }}</div>
    <div :id="'Bar'+id" style="height: 300px;"></div>
  </div>
</template>

<script>
  import {queryCurrentRawValueByUri} from "../../api/faultWarning";
  import {setEchartsHeight} from "../../utils/chartStyle";

  export default {
    name: "BarChart",
    data() {
      return {
        baseLength: 20,
        controlCurrent: []
      }
    },
    props: ['id', 'controlParaName', 'controlAim', 'controlUri', 'chartTitle'],
    async mounted() {
      await this.start();
      window.addEventListener("resize", () => {
        if (this.myChart) {
          // 计算echarts高度
          setEchartsHeight('bar-outer', 'Bar' + this.id, 50)
          this.myChart.resize();
        }
      });
      setEchartsHeight('bar-outer', 'Bar' + this.id, 50)
      this.myChart.resize();
    },
    watch: {
      controlCurrent() {
        this.start();
        this.myChart.setOption(this.option, true);
      },
    },
    methods: {
      async start() {
        await this.getData();
      },
      async getData() {
        // let keys = [];
        // let uris = [];
        // let aims = [];


        // for (let key in this.control) {
        //   if (this.control.hasOwnProperty(key)) {
        //
        //     keys.push(key);
        //     let value = this.control[key];
        //     uris.push(value.uri);
        //     aims.push(value.aim);
        //   }
        // }
        await queryCurrentRawValueByUri(this.controlUri).then(res => {
          if (res) {
            this.controlCurrent = [];
            for (let i = 0; i < res.data.result.length; i++) {
              this.controlCurrent.push(res.data.result[i].v);
            }
            // console.log('调用柱状图this.controlCurrent', this.controlCurrent);
          }
          this.drawChart();
        })
      },
      drawChart() {
        const chartDom = document.getElementById('Bar' + this.id);
        this.myChart = this.$echarts.init(chartDom);

        this.option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['优化前', '目标值'],
            textStyle: {
              color: '#2a2a2a',
              fontSize: 13.5,
            }
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: this.controlParaName
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '优化前',
              type: 'bar',
              barWidth: '18%', //barWidth设置每根柱状图的宽度
              emphasis: {
                focus: 'series'
              },
              data: this.controlCurrent,
              color: '#09CAF3',
              itemStyle: {
                normal: {
                  label: {
                    show: true,  // 开启显示标签数值
                    position: 'top',
                    textStyle: {
                      color: '#727171',
                      fontsize: 5,
                    },
                    rotate: 40   // 标签字体倾斜角度
                  }
                }
              }
            },
            {
              name: '目标值',
              type: 'bar',
              barWidth: '18%', //barWidth设置每根柱状图的宽度
              emphasis: {
                focus: 'series'
              },
              data: this.controlAim,
              color: '#0cE058',
              itemStyle: {
                normal: {
                  label: {
                    show: true,  // 开启显示标签数值
                    position: 'top',
                    textStyle: {
                      color: '#727171',
                      fontsize: 5,
                    },
                    rotate: 40   // 标签字体倾斜角度
                  }
                }
              }
            }
          ]
        };

        this.myChart.setOption(this.option);
      },

    }
  }
</script>

<style scoped>
  .chart-title {
    float: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  }
</style>
